import React from "react";
import {
  Form,
  Button,
  Select,
  DatePicker,
  Input,
  message

} from 'antd';
import {
  Link,
  withRouter
} from "react-router-dom";
import locale from 'antd/es/date-picker/locale/zh_CN';
import staffCss from './staff.module.css'

const { Option } = Select;
const { TextArea } = Input;
class Apply extends React.Component {
  constructor(props) {
    super(props);
    this.mydateRef = React.createRef();


  }
  state = {
    howLong: [],
    applySuccess: false,
    membersId: [],//选择成员id
    duration: 0,
    playDate: '',
    siteNum: 0,
    howManySite: [],//根据人数选场地
    options: [],//模糊搜索选择数据
    msg: "",//错误提示
    applyfailed: '',
  }
  componentDidMount () {
    this.setHowLong()

  }
  //选人
  selectMembers = (i) => {

    this.setSiteNumOption(i.length)
    console.log(i, "已选择")
  }

  //获取模糊数据
  handleSearch = (data) => {
    console.log(data, "输入")
    this.$axios({
      method: 'post',
      url: '/wx/portal/queryUsers',
      data: {
        searchKey: data
      },

    }).then(res => {
      if (res.data.code === 0) {
        this.setState({
          options: res.data.data,
        })
      }
      console.log(res, '后端返回数据')
    }).catch(function (error) {
      console.log(error);
    })

  }


  //新增申请
  submitApply = (data) => {

    const playDate = data.playDate.format('YYYY-MM-DD')
    console.log(data.remark, "表单数据")

    this.$axios({
      method: 'post',
      url: '/wx/portal/apply',
      data: {
        "siteNum": data.siteNum,
        "playDate": playDate,
        "duration": data.duration,
        "memberIds": data.membersId,
        "remark": data.remark,
        // "userId": "01012000"//测试
      },

    }).then(res => {
      if (res.data.code === 0) {
        this.setState({
          applySuccess: true,

        })
        
      } else {
        message.error({
          content:res.data.msg,
          style:{marginTop:250,left:100}
        });
        this.setState({ msg: res.data.msg, applyfailed: true })
      }
      console.log(res, '后端返回数据')
    }).catch(function (error) {
      console.log(error);
    })

  }



  setHowLong = (data) => {
    if (!data) {
      const a = []
      for (var i = 1; i <= 4; i = i + 0.5) {
        a.push(i)
      }
      this.setState({ howLong: a })
    }
  }
  //根据选择成员的人数选择
  setSiteNumOption = (data) => {

    const item = []
    for (var i = 0; i <= (data / 4); i++) {
      item.push(i + 1)
    }
    this.setState({ howManySite: item })
  }
  goback = () => {
    this.props.history.goBack()
  }
  clearOptions = () => {
    this.setState({ options: [] })
  }

  disableKeyboard = (i) => {
    console.log(this.mydateRef, i, "选择")
    if (i === "date") {

      this.mydateRef.current.blur();
    }
  }
  render () {
    const { howLong, applySuccess, howManySite, options, applyfailed, msg } = this.state
    console.log("刷新", options)
    return (
      <div>
        {/* <div style={{marginLeft:20}} onClick={this.goback}>
        <svg t="1627520711747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="30" height="30"><path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667z m-324.693333 373.013334l174.464-174.485334a21.141333 21.141333 0 0 0-0.192-29.973333 21.141333 21.141333 0 0 0-29.973334-0.192l-208.256 208.256a20.821333 20.821333 0 0 0-6.122666 14.976c0.042667 5.418667 2.133333 10.837333 6.314666 14.997333l211.178667 211.2a21.141333 21.141333 0 0 0 29.973333 0.213334 21.141333 21.141333 0 0 0-0.213333-29.973334l-172.629333-172.629333 374.997333 2.602667a20.693333 20.693333 0 0 0 21.034667-21.034667 21.482667 21.482667 0 0 0-21.333334-21.333333l-379.242666-2.624z" fill="#3D3D3D" p-id="1948"></path></svg>
        </div> */}
        {!applySuccess ?
          <div className={staffCss.form}  >

            <Form
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 10 }}
              className={staffCss.formOuter}
              onFinish={this.submitApply}
            >
              {
                applyfailed ?
                  <div style={{ color: "red" }}>{msg}</div> : ''
              }
              <Form.Item label="成员" name="membersId" rules={[{ required: true, message: '选择成员' }]} >
                <Select
                  mode="multiple"
                  placeholder="输入工号或名字"
                  onSearch={this.handleSearch}
                  style={{ width: '100%' }}
                  onChange={this.selectMembers}
                  onFocus={this.clearOptions}
                  optionFilterProp="children"
                >
                  {options.map(item => {
                    console.log(item)
                    return (
                      <Select.Option key={item.userId} value={item.userId}>
                        {item.userId + " " + item.userName}
                      </Select.Option>
                    )
                  })}
                </Select>
              </Form.Item>
              <Form.Item label="打球日期" name="playDate" rules={[{ required: true, message: '请选择打球日期' }]} >
                <DatePicker locale={locale} ref={this.mydateRef} onFocus={() => {
                  this.disableKeyboard("date")
                }} />
              </Form.Item>
              <Form.Item label="选择场地数量" name="siteNum" rules={[{ required: true, message: '请选择场地数量' }]} >
                <Select
                  placeholder="选择场地数量"
                  optionFilterProp="children"
                >
                  {
                    howManySite.map(i => (<Option value={i} key={i}>{i}</Option>))
                  }

                </Select>
              </Form.Item>
              <Form.Item label="预约时长" name="duration" rules={[{ required: true, message: '请选择时长' }]}>
                <Select       
                  placeholder="选择时长"
                  optionFilterProp="children"
                >
                  {
                    howLong.map(i => (<Option value={i} key={i}>{i}小时</Option>))
                  }
                </Select>
              </Form.Item>
              <Form.Item label="备注" name="remark">
                <TextArea showCount rows={4} />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit" >
                  提交
                </Button>
              </Form.Item>

            </Form>


          </div> :
          <div className={staffCss.success}>
            <svg t="1625562479130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1668" width="100" height="100"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="1669"></path><path d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z" fill="#FFFFFF" p-id="1670"></path></svg>
            <div style={{ fontSize: 20, marginTop: 30 }}>申请成功</div>
            <Link to={{ pathname: "/history" }}>
              <Button type="primary" style={{ marginTop: 20 }} >
                查看申请历史
              </Button>
            </Link>
          </div>
        }
      </div>

    );
  }
}



export default withRouter(Apply)

